<!--
 * @Author: hq
 * @Date: 2022-05-28 19:29:52
 * @LastEditors: hq
 * @LastEditTime: 2022-07-06 10:28:09
 * @Description: 添加分类弹窗
 * @version: 1.0
-->
<template>
  <div class="change">
    <el-row>
      <el-col :span="18">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="店铺名称" prop="shopname">
            <el-input
              v-model="ruleForm.shopname"
              placeholder="请输入店铺名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="店铺logo" :required="true">
            <el-upload
              v-loading="loading1"
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="upLoadServe"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品轮播图">
            <el-upload
              v-loading="loading2"
              action=""
              list-type="picture-card"
              :http-request="upLoadServeBanner"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :limit="10"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog
              class="editDialog"
              :visible.sync="dialogVisible"
              :append-to-body="true"
              width="500px"
            >
              <img width="100%" :src="ruleForm.bannerImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="店铺描述">
            <el-input
              v-model="ruleForm.description"
              placeholder="请输入店铺描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务电话" prop="tel">
            <el-input
              v-model="ruleForm.tel"
              oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              placeholder="请输入服务电话"
            ></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="20">
              <el-form-item label="地址" prop="address">
                <el-input
                  :readonly="true"
                  maxlength="3"
                  v-model="ruleForm.address"
                  placeholder="请输入地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mapbtn">
              <el-button @click="handleMap">点击搜索</el-button>
            </el-col>
          </el-row>
          <el-form-item label="营业时间" :require="true">
            <el-row>
              <el-col :span="10">
                <el-time-picker
                  v-model="ruleForm.startTime"
                  format="HH:mm"
                  value-format="HH:mm"
                  :picker-options="{
                    selectableRange: `00:00:00 -${
                      ruleForm.endTime ? ruleForm.endTime + ':00' : '23:59:00'
                    }`,
                  }"
                >
                </el-time-picker>
              </el-col>
              <el-col :span="10" class="pl15">
                <el-time-picker
                  v-model="ruleForm.endTime"
                  format="HH:mm"
                  value-format="HH:mm"
                  :picker-options="{
                    selectableRange: `${
                      ruleForm.startTime
                        ? ruleForm.startTime + ':00'
                        : '00:00:00'
                    }-23:59:00`,
                  }"
                >
                </el-time-picker>
              </el-col>
            </el-row>

            <!-- <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit('ruleForm')"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-dialog
      class="mapDialog"
      title="选择地理位置"
      :visible.sync="mapDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="900px"
    >
      <el-button type="primary" @click="handleAdd">添加</el-button>
      <Map v-if="mapDialog" @updateLocation="updateLocation"></Map>
    </el-dialog>
  </div>
</template>

<script>
import Map from "@/components/map.vue";
import { getGeoAddress, editShop, storeDetail } from "@/api/merchant";
import { upLoad } from "@/api/index";
import upImg from "@/utils/upimg";
export default {
  props: ["rowData"],
  components: { Map },
  data() {
    return {
      rowId: "",
      time: "",
      ruleForm: {
        shopname: "",
        description: "",

        bannerImageUrl: "", //baner
        tel: "",
        address: "",
        startTime: "",
        endTime: "",
      },
      imageUrl: "",
      imageUrlId: "",
      fileList: [],
      fileListId: [],
      fileListArr: [],
      mapDialog: false,
      optionProps: {
        value: "area_code",
        label: "name",
        children: "child",
      },
      modelKey: "",
      position: {
        lon: "",
        lat: "",
      }, //位置信息
      addressCode: "", //省市区code
      rules: {
        shopname: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
        ],
        tel: [{ required: true, message: "请输入服务电话", trigger: "blur" }],
        address: [{ required: true, message: "请选择地址", trigger: "blur" }],
      },
      dialogVisible: false, //banner图片dialog
      loading1: false,
      loading2: false,
    };
  },
  methods: {
    async editShop() {
      const { data, err } = await editShop({
        name: this.ruleForm.shopname,
        logo: this.imageUrlId,
        banner: this.fileListArr.join(","),
        location: this.ruleForm.address,
        description: this.ruleForm.description,
        tel: this.ruleForm.tel,
        busy_start: this.ruleForm.startTime,
        busy_end: this.ruleForm.endTime,
        lng: this.position.lon,
        lat: this.position.lat,
        province: this.addressCode,
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "操作成功！",
          type: "success",
        });
        this.$emit("handleClose");
      }
    },
    async storeDetail() {
      const { data, err } = await storeDetail({
        id: this.rowData.id,
      });
      if (err === 0) {
        this.ruleForm.shopname = data.name;
        this.imageUrl = data.logo.src;
        this.imageUrlId = data.logo.at_id;
        this.ruleForm.tel = data.tel;
        this.ruleForm.address = data.location;
        this.addressCode = data.province;
        this.ruleForm.startTime = data.busy_start;
        this.ruleForm.endTime = data.busy_end;
        data.banner.forEach((item) => {
          item.url = item.src;
        });
        this.fileList = data.banner;
        this.ruleForm.description = data.description;
      }
    },
    async getGeoAddress() {
      const { data, err } = await getGeoAddress({
        lng: this.position.lon,
        lat: this.position.lat,
      });
      if (err === 0) {
        this.addressCode = data.ad_code;
      }
    },
    //上传图片
    async upLoad(formData, name, state) {
      const { data, err } = await upLoad(formData);
      if (err === 0) {
        if (state === 2) {
          //state轮播图
          this.fileListId.push({ id: data.file_id, name: name });
          this.fileListArr = this.fileListId.map((item) => {
            return item.id;
          });
        } else {
          //判断是首图
          this.imageUrl = data.file_src;
          this.imageUrlId = data.file_id;
        }
      }
    },
    //删除商品图
    handleRemove(file, fileList) {
      //原来的图片
      this.fileList = fileList;
      //添加的图片
      this.fileListId.forEach((item, index) => {
        if (file.name === item.name) {
          this.fileListId.splice(index, 1);
        }
      });
      this.fileListArr = this.fileListId.map((item) => {
        return item.id;
      });
    },
    //上传轮播
    upLoadServeBanner(file) {
      this.loading2 = true;
      upImg.upimg(
        (data) => {
          //state轮播图
          this.fileListId.push({ id: data.data.url, name: file.file.name });
          this.fileListArr = this.fileListId.map((item) => {
            return item.id;
          });
          this.loading2 = false;
        },
        1,
        file
      );
      //   let formData = new FormData();
      //   formData.append("file", file.file);
      //   this.upLoad(formData, file.file.name, 2);
    },
    //上传logo
    upLoadServe(file) {
      this.loading1 = true;
      upImg.upimg(
        (data) => {
          console.log(data);
          //判断是logo
          this.imageUrl = data.data.pre_img;
          this.imageUrlId = data.data.url;
          this.loading1 = false;
        },
        1,
        file
      );
      //   let formData = new FormData();
      //   formData.append("file", file.file);
      //   this.upLoad(formData, file.file.name, 1);
    },

    handleMap() {
      this.mapDialog = true;
    },
    updateLocation(Addr) {
      this.position = Addr;
      this.ruleForm.address = Addr.orgAddr;
      //   ("位置信息：", Addr);
      this.getGeoAddress(); //获取省市区
    },
    handleAdd() {
      this.mapDialog = false;
    },
    //商品图
    handlePictureCardPreview(file) {
      this.ruleForm.bannerImageUrl = file.url;
      this.dialogVisible = true;
    },
    //提交
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.fileList) {
            //如果有旧图片
            this.fileList.forEach((item) => {
              this.fileListArr.push(item.at_id);
            });
          }
          this.editShop();
        }
      });
    },
  },
  created() {
    this.storeDetail();
  },
};
</script>

<style lang="scss" scoped>
.mapbtn {
  padding-top: 2px;
  padding-left: 10px;
  box-sizing: border-box;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
/deep/.el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.mapDialog {
  /deep/.el-dialog {
    height: 82%;
    margin-top: 10vh !important;
    .el-dialog__body {
      height: 80%;
      overflow: auto;
    }
  }
}
/deep/.el-date-editor.el-input {
  width: 140px;
  .el-input__inner {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }
}
.editDialog {
  /deep/.el-dialog {
    height: 82%;
    margin-top: 10vh !important;
    .el-dialog__body {
      height: 80%;
      overflow: auto;
    }
  }
}
.avatar-uploader {
  width: 82px;
  height: 82px;
}
</style>
